import {useReducer, useState} from "react";
import Meals from "./component/meals/Meals.jsx";
import CartContext from "./store/CartContext.jsx";
import FilterMeals from "./component/filterMeals/FilterMeals.jsx";
import Cart from "./component/cart/Cart.jsx";

const MEALS_DATA = [
    {
        id: '1',
        title: 'React',
        desc: 'React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观',
        price: 12,
        img: '/src/assets/react.svg'
    },
    {
        id: '2',
        title: 'React',
        desc: 'React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观',
        price: 13,
        img: '/src/assets/react.svg'
    },
    {
        id: '3',
        title: 'React',
        desc: 'React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观',
        price: 14,
        img: '/src/assets/react.svg'
    },
    {
        id: '4',
        title: 'React',
        desc: 'React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观',
        price: 14,
        img: '/src/assets/react.svg'
    },
    {
        id: '5',
        title: 'Vue',
        desc: 'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架',
        price: 14,
        img: '/src/assets/react.svg'
    },
    {
        id: '6',
        title: 'Vue',
        desc: 'Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架',
        price: 14,
        img: '/src/assets/react.svg'
    },
]

//定义cartReducer
const cartReducer = (cartData, action) => {
    //复制购物车
    const newCart = {...cartData};
    switch (action.type){
        default:
            return cartData
        case 'ADD':
            //添加商品
            if (newCart.items.indexOf(action.meal) === -1) {
                newCart.items.push(action.meal);
                action.meal.count = 1
            } else {
                action.meal.count += 1
            }
            newCart.totalCount += 1
            newCart.totalPrice += action.meal.price
            return newCart;
        case 'REMOVE':
            //减少商品
            action.meal.count -=1;
            if(action.meal.count === 0){
                newCart.items.splice(newCart.items.indexOf(action.meal),1)
            }
            newCart.totalCount -= 1
            newCart.totalPrice -= action.meal.price
            return newCart;
        case 'CLEAR':
            //清空数量
            newCart.items.forEach(item => delete item.count)
            newCart.items = [];
            newCart.totalCount = 0;
            newCart.totalPrice = 0;
            return newCart;

    }
}
function App() {

    //商品
    const [mealsData, setMealsData] = useState(MEALS_DATA)

    const [cartData, cartDispatch] = useReducer(cartReducer, {
            items: [],
            totalCount: 0,
            totalPrice: 0,
    })

    //过滤Meals
    const filterMealsHandler = (keyword) => {
        setMealsData(MEALS_DATA.filter(meal => meal.title.indexOf(keyword) !== -1))
    }

    return (
        <CartContext.Provider value={{...cartData,cartDispatch}}>
            <div>
                <FilterMeals onFilter={filterMealsHandler}/>
                <Meals mealsData={mealsData}/>
                <Cart/>
            </div>
        </CartContext.Provider>
    )
}

export default App
